 <template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button type="danger" @click="delAll()" v-model="posdelbtn" v-if="posdelshow">批量删除</el-button>
        <el-button type="success" @click="addPosition()" v-model="posaddbtn" v-if="posaddshow">增加</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="positionList"
      tooltip-effect="dark"
      style="width: 500px; margin: 0px auto"
      @selection-change="handleSelectionChange"
    >
      <!-- 多选框列 
     prop:指定该列要显示的数据属性
     -->
      <el-table-column
        type="selection"
        width="55"
        prop="position_id"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="position_code"
        label="职位编号"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="position_name"
        label="职位名称"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="updPosition(scope.row)" v-model="posupdbtn" v-if="posupdshow"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-model="posdelbtn" v-if="posdelshow"
            >删除</el-button
          >
          <!-- <el-button size="mini" type="success" @click="giveRole(scope.row)"
            >分配角色</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 增加模态框 -->
    <el-dialog title="职位增加" :visible.sync="addDialogFormVisible">
      <el-form>
        <el-form-item label="职位编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.position_code"></el-input>
        </el-form-item>
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.position_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAdd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 增加模态框结束 -->

    <!-- 修改模态框 -->
    <el-dialog title="职位修改" :visible.sync="updDialogFormVisible">
      <el-form>
        <el-form-item label="职位编号" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.position_code"></el-input>
        </el-form-item>
        <el-form-item label="职位名称" :label-width="formLabelWidth">
          <el-input type="text" v-model="addForm.position_name"></el-input>
        </el-form-item>
       </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUpd()">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改模态框结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      posdelbtn:'24',
      posupdbtn:'22',
      posaddbtn:'21',
      posdelshow:false,
      posupdshow:false,
      posaddshow:false,
      ids: [],
      addDialogFormVisible: false,
      addForm: {
        position_code: "",
        position_name: "",
      },
      formLabelWidth: "150px",
      positionList: [],
      id: "",
      updDialogFormVisible: false,
    };
  },
  methods: {
    loadData() {
      this.$axios
        .get("/position")
        .then((res) => {
          this.positionList = res.data.data;
            setTimeout(() => {
      //设置默认选中项
        this.login();
      }, 0);          
        })
        .catch((error) => {});
    },
    //val:array,代表的是选中所有行的数据
    handleSelectionChange(val) {
      var ids = []; //存放选中的id
      for (let item of val) {
        ids.push(item.position_id);
      }
      //将选中的所有项的id放到数据模型中
      this.ids = ids;
      console.log(ids);
      //this.multipleSelection = val;
    },
    delAll() {
      this.$axios
        .post("/position/delAll", this.ids)
        .then((res) => {
          alert(res.data.message);
          this.loadData();
        })
        .catch((error) => {});
    },
    handleDelete(item) {
      var id = item.position_id;
      this.$axios.delete("/position/" + id).then((res) => {
        alert(res.data.message);
        this.loadData();
      });
      //项服务器发送请求删除就ok
    },
    addPosition() {
      this.addForm.position_code = "";
      this.addForm.position_name = "";
      this.addDialogFormVisible = true;
    },
    saveAdd() {
      this.$axios
        .post("/position/add", this.addForm)
        .then((res) => {
          alert(res.data.message);
          this.addForm.position_code = "";
          this.addForm.position_name = "";
          this.addDialogFormVisible = false;
          this.loadData();
        })
        .catch((error) => {});
    },
    updPosition(item) {
      this.updDialogFormVisible = true;
      this.id = item.position_id;
      this.$axios
        .get("/position/" + this.id)
        .then((res) => {
          this.addForm.position_code = res.data.data.position_code;
          this.addForm.position_name = res.data.data.position_name;
        })
        .catch((error) => {});
    },
    saveUpd() {
      this.$axios
        .put("/position", {
          position_id: this.id,
          position_code: this.addForm.position_code,
          position_name: this.addForm.position_name,
        })
        .then((res) => {
          alert(res.data.message);
          this.updDialogFormVisible = false;
          this.addForm.position_code = "";
          this.addForm.position_name = "";
          this.loadData();
        });
    },
    login(){
      var l = sessionStorage.getItem("permission_list");
      var list = l.split(',');
      list.forEach((item)=>{
        if(item == this.posaddbtn){
          this.posaddshow = true;
        }
        if(item == this.posupdbtn){
          this.posupdshow = true;
        }
        if(item == this.posdelbtn){
          this.posdelshow = true;
        }
      })
    }
  },
  mounted() {
    this.loadData();
  },
};
</script>